Ext.onReady(function() {
    //page loading animation -start
    setTimeout(function(){
        Ext.get('loading').remove();
        Ext.get('loading-mask').fadeOut({
            remove:true
        });
    }, 250);
    //page loading animation -end
    //SOF blog data

    var blogsStore= Ext.create('Ext.data.Store', {
        autoLoad:false,
        autoSync:true,
        storeId:'BlogsStore',
        pageSize:30,
        fields: ['id','blog_name','blog_url','feed_url','language','status','author_email','author_name'],
        proxy: {
            type: 'ajax',
            
            api: {
                read: '/admin/get-blog-lists',
                update: '/admin/approve-blog',
                //create: '',
                destroy: '/admin/delete-blog'
            },
            reader: {
                type: 'json',
                root: 'data',
                successProperty: 'success',
                idProperty: 'id',
                totalProperty: 'total'

            }

        }

    });
    //EOF Blogs data

    var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    });
    var grid = Ext.create('Ext.grid.Panel', {
        store: blogsStore,
        //        stateful: true,
        //        stateId: 'stateGrid',
        columns: [
        {
            text     : 'Blog name',
            flex     : 1,
            sortable : false,
            dataIndex: 'blog_name',
            renderer: function (value, metaData, record, rowIndex,
                colIndex, store, view){
                return '<a href="'+record.get('blog_url')+'" target="_blank">'+value+'</a>';
            },
            editor: {
                allowBlank: false
            }
        },
        {
            text     : 'Feed',
            flex     : 3,
            sortable : true,
            dataIndex: 'feed_url',
            editor: {
                allowBlank: false
            }
        },
        {
            text     : 'Blog url',
            flex     : 1,
            sortable : true,
            dataIndex: 'blog_url',
            editor: {
                allowBlank: false
            }
        },
        
        {
            text     : 'Language',
            flex     : 1,
            sortable : true,
            dataIndex: 'language',
            editor: {
                xtype: 'combobox',
                typeAhead: true,
                triggerAction: 'all',
                selectOnTab: true,
                store: [
                ['si','Sinhala'],
                ['en','English'],
                ['ta','Tamil']
                ],
                lazyRender: true,
                listClass: 'x-combo-list-small'
            }
        },
        {
            text     : 'Status',
            flex     : 1,
            sortable : true,
            dataIndex: 'status',
            editor: {
                xtype: 'combobox',
                typeAhead: true,
                triggerAction: 'all',
                selectOnTab: true,
                store: [
                ['approved','approved'],
                ['new','new'],
                ['rejected','rejected']
                ],
                lazyRender: true,
                listClass: 'x-combo-list-small'
            }
        },{
            text     : 'Author',
            flex     : 1,

            dataIndex: 'author_name'

        },
        {
            text     : 'email',
            flex     : 1,

            dataIndex: 'author_email'
      
        }

        ,
        {
            xtype: 'actioncolumn',
            //            width: 50,
            header:'actions',
            items: [{
                icon   : '/images/icons/delete.png',
                handler: function(grid, rowIndex, colIndex) {
                    var blogId =blogsStore.getAt(rowIndex).data.id;
                    Ext.MessageBox.confirm({
                        title : 'delete confirm'+'|'+blogsStore.getAt(rowIndex).data.blog_name,
                        msg : 'සිරාවටම මේක මකන්න ඕනද? ආයෙ අන්ඩු නැහැ පුතේ.',
                        id:"delete-blog-dialog-box",
                        icon: Ext.MessageBox.QUESTION,
                        buttons : Ext.MessageBox.YESNO,
                        callback : function(btn) {
                            if(btn=="yes") {
                                blogsStore.removeAt(rowIndex);
                     
                            }

                        }

                    });
                }
            }]
        }
        ],

        dockedItems: [
        {
            xtype: 'toolbar',
            items: [   
            {
                xtype:'buttongroup',
                title:'Status'
               
            }
            ,'->',
            {
                xtype: 'searchfield',
                width: 240,
                store:blogsStore
            }
        
            ]
        }, {
            xtype: 'pagingtoolbar',
            store: blogsStore,   // same store GridPanel is using
            dock: 'top',
            displayInfo: true,
            items:[{
                xtype:'button',
                text:'New',
                id:'blog-new-toggle-btn',
                enableToggle: true,
                handler :function() {
                    blogsStore.load({
                        params: {
                            newStatus:Ext.getCmp('blog-new-toggle-btn').pressed
                        }
                    });
                }
            },
            {
                xtype:'button',
                text:'Approved',
                enableToggle: true
            },
            {
                xtype:'button',
                text:'rejected',
                enableToggle: true
            }
            ]
        }],
        plugins: [cellEditing]
      
    });

    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        autoHeight: true,
        height:"100%",
        autoScroll:true,
        items: [{
            region: 'north',
            autoHeight: true,
            border: false
        },{
            region: 'center',
            id:'centerwindow',
            border:true,
            autoHeight: true,
            height:"100%",
            autoScroll:true,
            emptyText : "no content to display",
            items:grid
             
  
        }
        ]

    });
    //signup onclick
    blogsStore.load({
        params: {
            newStatus:Ext.getCmp('blog-new-toggle-btn').pressed
        }
    });
});
  